<template>
  <div v-if="list.length > 0">
    <transition-group tag="div" appear enter-active-class="animate__animated animate__zoomInUp"
      leave-active-class="animate__animated animate__zoomOutDown">
      <div v-for="(item, index) in list" :key="index" class="item">
        <div>
          <input type="checkbox" v-model="item.check" />
          <span :class="item.check ? 'del_line' : ''">{{ item.title }}</span>
          <button @click="del(item, index)">删除</button>
        </div>
      </div>
    </transition-group>
  </div>
  <div v-else style="color: #888">暂无任务</div>
</template>

<script lang="ts" setup>
import { PropType, ref } from "vue";
type ListRow = {
  check: boolean,
  title: string
}

// const props = 
defineProps({
  list: {
    type: Array as unknown as PropType<[ListRow]>,
    default: () => [],
  },
});
const emit = defineEmits(["del"]);
const del = (item: any, index: number) => {
  emit("del", index);
};
</script>

<style scoped>
.item {
  margin: 10px 0 10px 0;
}

.item>span {
  margin-right: 10px;
}

.del_line {
  text-decoration: line-through;
}
</style>
